<template>
  <div class="subjects-container">
    <div class="app-container">
      <!-- 学科管理头部模块 -->
      <div class="subjects-top">
        <div class="s-top-left">
          <label for="" style="padding-left:10px">学科名称</label>
          <el-input
            placeholder="请输入内容"
            class="sub-input"
            v-model="ipt"
          ></el-input>
          <el-button class="top-btn" @click="delIpt">清除</el-button>
          <el-button type="primary" @click="searchSub">搜索</el-button>
          <el-button
            type="success"
            style="float: right"
            @click="clickShowDialog"
            ><i class="el-icon-edit"></i>新增学科</el-button
          >
        </div>
      </div>
      <div class="el-card">
        <el-alert  :closable="false"  class="el-icon-info">数据一共{{ counts }}条</el-alert>
      </div>
      <!-- 表格模块 -->
      <el-table :data="tableData" stripe style="width: 100%" class="sub-tab">
        <el-table-column
          label="序号"
          width="50%"
          type="index"
        ></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column  label="创建日期" width="150%">
          <template slot-scope="{row}"> {{_formatDate(row.addDate)}} </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
        ></el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
        ></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="totals" label="题目数量"></el-table-column>
        <!-- 按钮 -->
        <el-table-column label="操作" width="260%">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="classifRouter(row,'/subjects/directorys')"> 学科分类 </el-button>
            <el-button type="text" size="small" @click="classifRouter(row,'/subjects/tags')"> 学科标签 </el-button>
            <el-button type="text" size="small" @click="currentSubject(row)">
              修改
            </el-button>
            <el-button type="text" size="small" @click="delDiglog(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页模块 -->
      <div class="pagination">
        <el-pagination
          background
          :total="counts"
          :page-sizes="[5, 10, 15, 20]"
          layout="prev, pager, next,sizes,jumper"
          :current-page.sync="page"
          :page-size = 'pagesize'
          @current-change="pageChange"
          @size-change="sizeChange"

        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗组件 -->
    <subjects-add
      :centerDialogVisible="showDialog"
      @close-subject-dialog="closeSubjectDialog"
      @update-subject="updateSubject"
      ref="sub"
    />
  </div>
</template>

<script>
// 引入API接口
import { list, remove } from '@/api/hmmm/subjects'
// 引入组件
import subjectsAdd from '../components/subjects-add'
// 引入时间处理
import dayjs from 'dayjs'
export default {
  components: {
    subjectsAdd
  },
  data () {
    return {
      // 输入的页码
      page: 1,
      // 每页的数量
      pagesize: 10,
      // 学科的总数
      counts: null,
      // 返回的数据
      tableData: [],
      // 输入框的内容
      ipt: '',
      // 新增弹窗的显示
      showDialog: false
    }
  },
  created () {
    const data = {
      page: this.page,
      pagesize: this.pagesize
    }
    this.subjectList(data)
  },
  methods: {
    // 发送请求，获取数据列表
    async subjectList (data) {
      const res = await list(data)
      console.log(res)
      this.counts = res.data.counts
      this.tableData = res.data.items
      // console.log(this.tableData)
      // 遍历将数据中isFrontDisplay返回的数据，将1和0的形式改为是与否
      this.tableData.forEach((item) => {
        if (item.isFrontDisplay === 1) {
          item.isFrontDisplay = '是'
        } else {
          item.isFrontDisplay = '否'
        }
      })
    },
    // 点击清除按钮，清空输入框的内容
    delIpt () {
      this.ipt = ''
    },
    // 根据关键字，发送请求，获取搜索学科数据
    // 点击搜索，获取搜索学科数据
    searchSub () {
      // 跳转回第一页
      this.page = 1
      console.log(this.page)
      const data = {
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.ipt
      }
      this.subjectList(data)
    },
    // 点击下一页
    pageChange (page) {
      // 参数page是当前的页码
      const data = {
        page: page,
        pagesize: this.pagesize,
        subjectName: this.ipt
      }
      this.subjectList(data)
    },
    // 每页的条数发送改变时
    sizeChange (size) {
      // 参数size是改变之后的条数
      this.pagesize = size
      // 跳转到第一页
      this.page = 1
      const data = {
        page: this.page,
        pagesize: size,
        subjectName: this.ipt
      }
      this.subjectList(data)
    },
    // 点击显示弹窗
    clickShowDialog () {
      this.showDialog = true
    },
    // 关闭弹窗
    closeSubjectDialog () {
      this.showDialog = false
    },
    // 点击子组件中的确认按钮，更新页面
    updateSubject () {
      const data = {
        page: this.page,
        pagesize: this.pagesize
      }
      this.subjectList(data)
    },
    // 点击修改，数据回显
    currentSubject (data) {
      // console.log(data)
      this.showDialog = true
      this.$refs.sub.editSubject(data.id)
    },
    // 点击删除
    delDiglog (sub) {
      console.log(sub)
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(sub)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新渲染页面
        this.subjectList({
          page: this.page,
          pagesize: this.pagesize
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 路由跳转
    classifRouter (data, path) {
      this.$router.push({
        path,
        query: {
          id: data.id,
          name: data.subjectName

        }
      })
    },
    // 时间处理
    _formatDate (val) {
      return dayjs(val).format('YYYY-MM-DD HH:MM:ss')
    }
  }
}
</script>

<style scoped lang='less'>
.el-icon-info:before {
  font-size: 16px;
  margin-top: 5px;
}
.subjects-container {
  margin: 10px 7px;
  padding: 5px;
  background-color: #fff;
}
.top-btn {
  margin-left: 15px;
}
.subjects-top {
  padding-left: 5px;
  margin-bottom: 20px;
}
.sub-input {
  width: 188px;
  margin-left: 10px;
}
// 图片的样式
.el-card {
  margin-bottom: 20px;
}
.sub-tab {
  margin-bottom: 40px;
}
.pagination {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-bottom: 20px;
  padding-right: 50px;
}
</style>
